<!--审核详情-->
<template>
	<div class="detail-container">
		<el-link icon="el-icon-arrow-left" :underline="false" @click="goBack">返回</el-link>
		<div class="name">审核</div>
		<el-form class="base-form" label-position="left" label-width="160px" :model="baseForm">
			<div class="form-part">
				<div class="title">企业基本信息</div>
				<div class="row-item">
					<div class="col-item">
						<el-form-item label="企业名称" prop="unitName">
							<el-input placeholder="请输入企业名称" v-model="baseForm.unitName" disabled></el-input>
						</el-form-item>
					</div>
					<div class="col-item">
						<el-form-item label="社会统一信用代码" prop="unitOrgCode">
							<el-input placeholder="请输入社会统一信用代码" v-model="baseForm.unitOrgCode" disabled></el-input>
						</el-form-item>
					</div>
				</div>
				<div class="row-item">
					<div class="col-item">
						<el-form-item label="支撑单位" prop="supportUnitCode">
							<el-select v-model="baseForm.supportUnitCode" placeholder="请选择" disabled
								style="width: 100%">
								<el-option v-for="(it, ind) in supportUnitDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
					</div>
					<div class="col-item">
						<el-form-item label="行业" prop="industryLabelCode">
							<el-select v-model="baseForm.industryLabelCode" placeholder="请选择" disabled
								style="width: 100%">
								<el-option v-for="(it, ind) in labelHybqDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
					</div>
				</div>
				<div class="row-item">
					<div class="col-item">
						<el-form-item label="实际办公地址">
							<div style="display: flex">
								<el-select placeholder="请选择所在街道" v-model="baseForm.unitStreet"
									style="margin-right: 10px" disabled>
									<el-option v-for="(it, ind) in unitStreetDict" :key="ind" :label="it.label"
										:value="it.value"></el-option>
								</el-select>
								<el-input placeholder="请输入详细地址" v-model="baseForm.unitAddress" disabled></el-input>
							</div>
						</el-form-item>
					</div>
					<div class="col-item">
						<el-form-item label="楼宇" prop="building">
							<el-select v-model="baseForm.building" placeholder="请选择" disabled style="width: 100%">
								<el-option v-for="(it, ind) in buildingListDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
					</div>
				</div>
				<div class="row-item">
					<div class="col-item">
						<el-form-item label="网络安全负责人" prop="unitName">
							<el-input placeholder="请输入网络安全负责人" v-model="baseForm.hasLinkman" disabled></el-input>
						</el-form-item>
					</div>
					
				</div>
			</div>
		</el-form>
		<el-form class="dynamic-form">
			<div class="form-part">
				<div class="title">资产信息</div>
				<!--域名-->
				<div class="list-item" v-for="(item, index) in domainFormList" :key="index">
					<div class="left-form">
						<div class="form-item">
							<el-form-item :label="`域名${index + 1}`" :prop="'item.' + index + '.domainName'">
								<el-input placeholder="请输入域名" v-model="item.domainName" disabled></el-input>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="ICP备案号" :prop="'item.' + index + '.icpRegCode'">
								<el-input placeholder="请输入ICP备案号" v-model="item.icpRegCode" disabled></el-input>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="公安备案号" :prop="'item.' + index + '.policeRegCode'">
								<el-input placeholder="请输入公安备案号" v-model="item.policeRegCode" disabled></el-input>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="网站名称" :prop="'item.' + index + '.websiteName'">
								<el-input placeholder="请输入网站名称" v-model="item.websiteName" disabled></el-input>
							</el-form-item>
						</div>
					</div>
				</div>
				<!--已评测系统-->
				<div class="list-item" v-for="(item, index) in systemFormList" :key="index">
					<div class="left-form">
						<div class="form-item">
							<el-form-item :label="`已评测系统名称${index + 1}`" :prop="'item.' + index + '.systemName'">
								<el-input placeholder="请输入已评测系统名称" v-model="item.systemName" disabled></el-input>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="保护等级" :prop="'item.' + index + '.systemLevel'">
								<el-select placeholder="请选择保护等级" v-model="item.systemLevel" disabled>
									<el-option v-for="(it, ind) in systemLevelDict" :key="ind" :label="it.label"
										:value="it.value"></el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="定级方式" :prop="'item.' + index + '.gradingType'">
								<el-select placeholder="请选择定级方式" v-model="item.gradingType" disabled>
									<el-option v-for="(it, ind) in gradingTypeDict" :key="ind" :label="it.label"
										:value="it.value"></el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="测评时间" :prop="'item.' + index + '.testTime'">
								<el-input placeholder="请输入测评时间" v-model="item.testTime" disabled></el-input>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="测评机构" :prop="'item.' + index + '.testOrg'">
								<el-input placeholder="请输入测评机构" v-model="item.testOrg" disabled></el-input>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="复测情况" :prop="'item.' + index + '.hasRetest'">
								<el-select placeholder="请选择复测情况" v-model="item.hasRetest" disabled>
									<el-option v-for="(it, ind) in hasRetestDict" :key="ind" :label="it.label"
										:value="it.value"></el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="复测机构" :prop="'item.' + index + '.retestOrg'">
								<el-input placeholder="请输入复测机构" v-model="item.retestOrg" disabled></el-input>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="等保编号" :prop="'item.' + index + '.gradingProtectionNo'">
								<el-input placeholder="请输入等保编号" v-model="item.gradingProtectionNo" disabled></el-input>
							</el-form-item>
						</div>
					</div>
				</div>
				<!--未评测系统-->
				<div class="list-item" v-for="(item, index) in unSystemFormList" :key="index">
					<div class="left-form">
						<div class="form-item">
							<el-form-item :label="`未评测系统名称${index + 1}`" :prop="'item.' + index + '.systemName'">
								<el-input placeholder="请输入未评测系统名称" v-model="item.systemName" disabled></el-input>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="保护等级" :prop="'item.' + index + '.systemLevel'">
								<el-select placeholder="请选择保护等级" v-model="item.systemLevel" disabled>
									<el-option v-for="(it, ind) in systemLevelDict" :key="ind" :label="it.label"
										:value="it.value"></el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="定级方式" :prop="'item.' + index + '.gradingType'">
								<el-select placeholder="请选择定级方式" v-model="item.gradingType" disabled>
									<el-option v-for="(it, ind) in gradingTypeDict" :key="ind" :label="it.label"
										:value="it.value"></el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="评估机构" :prop="'item.' + index + '.evalOrg'">
								<el-input placeholder="请输入评估机构" v-model="item.evalOrg" disabled></el-input>
							</el-form-item>
						</div>
					</div>
				</div>
				<!--APP-->
				<div class="list-item" v-for="(item, index) in appFormList" :key="index">
					<div class="left-form">
						<div class="form-item">
							<el-form-item :label="`APP名称${index + 1}`" :prop="'item.' + index + '.appName'">
								<el-input placeholder="请输入APP名称" v-model="item.appName" disabled></el-input>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="运行平台" :prop="'item.' + index + '.platform'">
								<el-input placeholder="请输入运行平台" v-model="item.platform" disabled></el-input>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="ICP备案号" :prop="'item.' + index + '.icpRegCode'">
								<el-input placeholder="请输入ICP备案号" v-model="item.icpRegCode" disabled></el-input>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="公安备案号" :prop="'item.' + index + '.policeRegCode'">
								<el-input placeholder="请输入公安备案号" v-model="item.policeRegCode" disabled></el-input>
							</el-form-item>
						</div>
					</div>
				</div>
				<!--小程序-->
				<div class="list-item" v-for="(item, index) in appletFormList" :key="index">
					<div class="left-form">
						<div class="form-item">
							<el-form-item :label="`小程序名称${index + 1}`" :prop="'item.' + index + '.appletName'">
								<el-input placeholder="请输入小程序名称" v-model="item.appletName" disabled></el-input>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="APPID" :prop="'item.' + index + '.appletId'">
								<el-input placeholder="请输入APPID" v-model="item.appletId" disabled></el-input>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="ICP备案号" :prop="'item.' + index + '.icpRegCode'">
								<el-input placeholder="请输入ICP备案号" v-model="item.icpRegCode" disabled></el-input>
							</el-form-item>
						</div>
						<div class="form-item">
							<el-form-item label="公安备案号" :prop="'item.' + index + '.policeRegCode'">
								<el-input placeholder="请输入公安备案号" v-model="item.policeRegCode" disabled></el-input>
							</el-form-item>
						</div>
					</div>
				</div>
			</div>
		</el-form>
		<el-form class="desc-form">
			<div class="form-part">
				<div class="title">审核意见</div>
				<el-form-item>
					<el-input type="textarea" placeholder="请输入您的审核意见" rows="10" v-model="noPassReason"></el-input>
				</el-form-item>
			</div>
		</el-form>
		<div class="btn-group">
			<el-button class="btn refuse" @click="submit(false)">不通过</el-button>
			<el-button class="btn pass" @click="submit(true)">通过 <i class="el-icon-arrow-right"></i></el-button>
		</div>
	</div>
</template>

<script>
	import {
		getEditEnterpriseInfo,
		listEditDomainInfo,
		listEditSystemInfo,
		listEditAppInfo,
		listEditAppletInfo,
		completeModifyTask
	} from '@/api/enterprise'
	export default {
		data() {
			return {
				baseForm: {
					unitName: '',
					unitOrgCode: '',
					supportUnitCode: '',
					industryLabelCode: '',
					unitStreet: '',
					unitAddress: '',
					building: ''
				},
				domainFormList: [],
				systemFormList: [],
				unSystemFormList: [],
				appFormList: [],
				appletFormList: [],
				noPassReason: ''
			}
		},

		computed: {
			id() {
				return this.$route.query.id
			},
			enterpriseId() {
				return this.$route.query.enterpriseId
			},
			unitOrgCode() {
				return this.$route.query.unitOrgCode
			},
			supportUnitDict() {
				const dict = this.$store.getters.dict;
				const list = [];
				for (let value in dict.supportUnit) {
					list.push({
						label: dict.supportUnit[value],
						value
					});
				}
				return list;
			},
			unitStreetDict() {
				const dict = this.$store.getters.dict
				const list = []
				for (let value in dict.unitStreet) {
					list.push({
						label: dict.unitStreet[value],
						value
					})
				}
				return list
			},
			systemLevelDict() {
				const dict = this.$store.getters.dict
				const list = []
				for (let value in dict.systemLevel) {
					list.push({
						label: dict.systemLevel[value],
						value
					})
				}
				return list
			},
			gradingTypeDict() {
				const dict = this.$store.getters.dict
				const list = []
				for (let value in dict.gradingType) {
					list.push({
						label: dict.gradingType[value],
						value
					})
				}
				return list
			},
			hasRetestDict() {
				const list = [{
						label: '是',
						value: 1
					},
					{
						label: '否',
						value: 0
					}
				]
				return list
			},
			labelHybqDict() {
				const dict = this.$store.getters.dict;
				const list = [];
				for (let value in dict.labelHybq) {
					list.push({
						label: dict.labelHybq[value],
						value
					});
				}
				return list;
			},
			buildingListDict() {
				const dict = this.$store.getters.dict;
				const list = [];
				for (let value in dict.buildingList) {
					list.push({
						label: dict.buildingList[value],
						value
					});
				}
				return list;
			},
		},

		mounted() {
			if (this.enterpriseId) {
				this.initDetail();
			}
		},
		methods: {
			initDetail() {
				this.getEditEnterpriseInfo()
				this.listEditDomainInfo()
				this.listEditUnSystemInfo()
				this.listEditSystemInfo()
				this.listEditAppInfo()
				this.listEditAppletInfo()
			},
			// 获取企业基本信息
			getEditEnterpriseInfo() {
				getEditEnterpriseInfo({
					enterpriseId: this.enterpriseId
				}).then((res) => {
					console.log(res)
					this.baseForm = res.data
				})
			},
			// 获取域名资产数据
			listEditDomainInfo() {
				listEditDomainInfo({
					unitOrgCode: this.unitOrgCode
				}).then((res) => {
					this.domainFormList = res.data
				})
			},
			// 获取系统资产数据（未测评）
			listEditUnSystemInfo() {
				listEditSystemInfo({
					unitOrgCode: this.unitOrgCode,
					hasTest: 0
				}).then((res) => {
					this.unSystemFormList = res.data
				})
			},

			// 获取系统资产数据（已测评）
			listEditSystemInfo() {
				listEditSystemInfo({
					unitOrgCode: this.unitOrgCode,
					hasTest: 1
				}).then((res) => {
					this.systemFormList = res.data
				})
			},
			// 获取APP资产数据
			listEditAppInfo() {
				listEditAppInfo({
					unitOrgCode: this.unitOrgCode
				}).then((res) => {
					this.appFormList = res.data
				})
			},
			// 获取小程序资产数据
			listEditAppletInfo() {
				listEditAppletInfo({
					unitOrgCode: this.unitOrgCode
				}).then((res) => {
					this.appletFormList = res.data
				})
			},
			submit(isPass) {
				if (!isPass && !this.noPassReason) {
					this.$message.error('请输入不通过原因')
					return
				}
				completeModifyTask({
					taskId: this.id,
					enterpriseId: this.enterpriseId,
					isPass,
					noPassReason: this.noPassReason
				}).then((res) => {
					this.$message.success('操作成功')
					this.goBack()
				})
			},
			goBack() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-container {
		padding: 20px;

		.name {
			font-size: 26px;
			margin: 10px 0 20px;
		}

		.base-form,
		.dynamic-form {
			margin-bottom: 28px;
		}

		.form-part {
			background: rgba(255, 255, 255, 0.6);
			box-shadow: 0px 4px 64px 32px rgba(0, 0, 0, 0.05);
			border-radius: 4px 4px 4px 4px;
			border: 1px solid #ffffff;
			padding: 15px;

			.title {
				font-size: 16px;
				color: #000822;
				margin-bottom: 30px;
				display: flex;
				align-items: center;

				&::before {
					content: '';
					display: block;
					width: 2px;
					height: 16px;
					background: #000822;
					margin-right: 8px;
				}
			}

			.row-item {
				padding-left: 8px;
				display: flex;
				justify-content: space-between;

				.col-item {
					width: 45%;

					::v-deep .el-form-item {
						.el-input__inner {
							background: rgba(0, 8, 34, 0.05);
							border: none;
						}
					}
				}
			}

			.list-item {
				height: 98px;
				padding: 0 36px 0 24px;
				background: rgba(0, 8, 34, 0.05);
				border-radius: 4px 4px 4px 4px;
				margin-bottom: 16px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left-form {
					display: flex;

					.form-item {
						::v-deep {
							.el-form-item {
								margin-bottom: 0;
							}

							.el-input__inner {
								background-color: transparent;
								border: none;
								padding-left: 0;
							}
						}
					}
				}
			}

			::v-deep .el-textarea__inner {
				background: rgba(0, 8, 34, 0.05);
				border: none;
				padding: 15px;
			}
		}

		.btn-group {
			margin-top: 30px;
			text-align: center;

			.btn {
				width: 104px;
				height: 40px;
				color: #ffffff;
				border: none;

				&.refuse {
					background: #000822;
					border-radius: 4px 0 0 4px;
				}

				&.pass {
					background: #1c4088;
					margin: 0;
					border-radius: 0 4px 4px 0;
				}
			}
		}
	}
</style>